<template>
  <div class="bi-cube-container">
    <cube-header
      :model-value="dataset.name"
      :page-status="dataset"
      back-url="/"
      @save="handleSaveSchema"
      @back="handleBack"
    />
    <div class="bi-cube-wrapper">
      <page-cube-wrapper class="full-wrapper">
        <template #left>
          <cube-table-list />
        </template>
        <template #default>
          <div class="default-wrapper">
            <link-node-wrapper
              :dragging="dragging"
              :data="stateTree"
              @node-click="handleNodeClick"
              @node-remove="handleNodeRemove"
              @node-drop="handleNodeDrop"
              @link-click="handleLinkClick"
              @empty-drop="handleEmptyDrop"
              :dev="dev"
            />
          </div>
        </template>
        <template #draggable>
          <div class="table-header">
            <div class="header-tabs">
              <a-space>
                <a-button size="mini" :type="!isSetting ? 'primary' : 'text'" @click="isSetting = !isSetting">
                  数据预览
                </a-button>
                <a-button size="mini" :type="isSetting ? 'primary' : 'text'" @click="isSetting = !isSetting">
                  批量设置
                </a-button>
              </a-space>
            </div>
            <div class="right-col">
              <!--dev-->
              <span class="mr-8">
                <a-button size="mini" @click="newFields">新建计算字段</a-button>
              </span>
              <a-button type="primary" size="mini" icon="reload" @click="handleRefreshData">刷新数据 </a-button>
            </div>
          </div>
          <div class="preview-data-content">
            <div class="preview-data-scroll">
              <div class="preview-data-right">
                <template v-if="isSetting">
                  <cube-field-edit
                    :dimension-fields="dimensionFields"
                    :measure-fields="measureFields"
                    @command="handleDmCommand"
                  />
                </template>
                <template v-else>
                  <cube-field-table
                    :dimension-fields="dimensionFields"
                    :measure-fields="measureFields"
                    @command="handleDmCommand"
                  />
                </template>
              </div>
            </div>
          </div>
        </template>
      </page-cube-wrapper>

      <!--节点编辑-->
      <cube-node-edit ref="nodeEditRef" @save="saveSelectedFields" />
      <cube-link-edit ref="linkEditRef" @save="saveJoinKeys" />
      <a-modal v-model:visible="fieldModal" title="编辑字段">
        <a-form :model="filedNode" label-width="90px">
          <a-form-item label="字段名" required>
            <label>{{ filedNode.field }}</label>
          </a-form-item>
          <a-form-item
            prop="title"
            label="字段标题"
            :rules="{
              required: true,
              message: '字段标题不能为空',
              trigger: 'blur'
            }"
          >
            <a-input v-model="filedNode.title" />
          </a-form-item>
        </a-form>
        <template #footer>
          <a-button @click="fieldModal = false">取 消</a-button>
          <a-button type="primary" @click="saveField">确 定</a-button>
        </template>
      </a-modal>
      <a-modal v-model:visible="newFieldsVisible" title="编辑计算字段" draggable width="70%" align-center>
        <div class="flex">
          <div class="w-4/6">
            <a-form :model="filedForm" auto-label-width>
              <a-form-item label="字段名" required>
                <a-input v-model="filedForm.title" />
              </a-form-item>
              <a-form-item label="sql" required>
                <ma-code-editor ref="codeEdit" v-model="filedForm.view_sql" height="300" language="mysql" />
              </a-form-item>
              <a-form-item label="类型" required>
                <a-radio-group v-model="filedForm.type">
                  <a-radio value="D">维度</a-radio>
                  <a-radio value="M">指标</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-form>
          </div>
          <div class="flex gap-2 pl-3">
            <div>
              维度
              <div
                class="border mb-1 cursor-pointer border-blue-400 bg-blue-100 pl-1"
                v-for="item in dimensionFields"
                @click="insetText(item.node.field)"
                :key="item.node.id"
              >
                <span class="text-xs text-ellipsis font-bold">
                  {{ item.node.field }}{{ item.node.title ? `(${item.node.title})` : "" }}
                </span>
              </div>
            </div>
            <div>
              指标
              <div
                class="border mb-1 cursor-pointer border-blue-400 bg-blue-100 pl-1"
                v-for="item in measureFields"
                :key="item.node.id"
              >
                <span class="text-xs text-ellipsis font-bold">
                  {{ item.node.field }}{{ item.node.title ? `(${item.node.title})` : "" }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <a-button @click="newFieldsVisible = false">取 消</a-button>
          <a-button type="primary" @click="savaField">确 定</a-button>
        </template>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { provide, ref } from "vue"
import useCubePage from "@/views/datasource/cube/hooks/use-cube-page"
import useModelData from "@/views/datasource/cube/hooks/use-model-data"
import PageCubeWrapper from "@/components/Common/Page/page-cube-wrapper.vue"
import LinkNodeWrapper from "@/components/Service/LinkNode/index.vue"
import CubeHeader from "@/views/datasource/cube/components/cube-header.vue"
import CubeTableList from "@/views/datasource/cube/components/cube-table-list.vue"
import CubeNodeEdit from "@/views/datasource/cube/components/cube-node-edit.vue"
import CubeLinkEdit from "@/views/datasource/cube/components/cube-link-edit.vue"
import CubeFieldTable from "@/views/datasource/cube/components/cube-field-table.vue"
import CubeFieldEdit from "@/views/datasource/cube/components/cube-field-edit.vue"
import { isProd } from "@/utils/env"
import { Message } from "@arco-design/web-vue"
import tool from "@/utils/tool.js"

export default {
  name: "Cube",
  components: {
    CubeFieldTable,
    CubeLinkEdit,
    CubeNodeEdit,
    LinkNodeWrapper,
    CubeTableList,
    CubeFieldEdit,
    PageCubeWrapper,
    CubeHeader
  },
  setup() {
    const pageStatus = useCubePage()
    const schemaStatus = useModelData(pageStatus.dataset)
    const codeEdit = ref(null)
    // 是否设置模式
    const isSetting = ref(false)
    provide("BiCube", {
      schemaStatus,
      pageStatus,
      ...schemaStatus
    })

    const newFieldsVisible = ref(false)
    const filedForm = ref({
      field: "",
      title: "",
      view_sql: "",
      type: "D",
      nodeKey: "",
      aggregate: "SUM",
      format: ""
    })
    const newFields = () => {
      newFieldsVisible.value = true
    }

    const savaField = () => {
      if (!filedForm.value.title) {
        Message.error("字段标题不能为空")
        return
      }
      if (!filedForm.value.view_sql) {
        Message.error("sql不能为空")
        return
      }
      schemaStatus.addCalField({
        fieldId: "f_" + tool.uuid(),
        field: filedForm.value.view_sql,
        tableId: "la_admin",
        tableName: "la_admin",
        title: filedForm.value.title,
        dataType: filedForm.value.type === "M" ? "int" : "string",
        nodeType: "attribute",
        type: filedForm.value.type,
        aggregate: filedForm.value.aggregate,
        nodeKey: schemaStatus.dimensionFields.value.length + 1
      })
      newFieldsVisible.value = false
    }

    const insetText = (text) => {
      codeEdit.value.insertText(text)
    }

    return {
      dev: !isProd,
      debugVisible: ref(false),
      newFieldsVisible,
      newFields,
      filedForm,
      insetText,
      codeEdit,
      savaField,
      isSetting,
      ...pageStatus,
      ...schemaStatus
    }
  }
}
</script>

<style scoped lang="less">
.bi-cube-container {
  height: 100vh;
  width: 100%;
  position: relative;

  .bi-cube-wrapper {
    position: relative;
    height: calc(100% - 50px);

    .full-wrapper {
      width: 100%;
      height: 100%;
      background-color: #fff;
    }

    .default-wrapper {
      padding: 24px;
      background-color: #f2f2f2;
      height: 100%;
      overflow: auto;
    }

    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 48px;
      box-sizing: border-box;
      padding: 0 20px;
      background-color: #fff;
      border-bottom: 1px solid #f0f0f0;
      border-top: 1px solid #f0f0f0;

      .header-tabs {
        display: flex;
        height: 100%;

        .tab {
          position: relative;
          height: 100%;
          line-height: 48px;
          color: var(--bin-color-primary);

          &.active:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background-color: var(--bin-color-primary);
          }
        }
      }
    }

    .preview-data-content {
      height: calc(100% - 48px);
      width: 100%;
      overflow: auto;

      .preview-data-scroll {
        display: flex;
        min-width: 1000px;
        height: 100%;
      }

      .preview-data-left {
        width: 260px;
      }

      .preview-data-right {
        width: calc(100% - 0px);
        height: 100%;
        overflow: auto;
      }

      .cube-field-panel {
        width: 260px;
        height: 100%;
        background-color: #fff;
        color: #191919;
        border-right: 1px solid #d8d8d8;

        .cube-tree {
          padding: 8px 5px;

          + .cube-tree {
            border-top: 1px solid #d8d8d8;
          }

          :deep(.bin-tree) {
            .setting-action {
              display: none;
            }

            .bin-tree-render-title {
              .D > i {
                color: var(--primary-1);
              }

              .M > i {
                color: var(--primary-1);
              }

              &:hover .setting-action {
                display: block;
              }
            }
          }
        }
      }
    }
  }
}
</style>
